<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title uni-common-mt">默认样式</view>
      <view>
        <checkbox-group>
          <checkbox value="cb1" checked="true" />选中
          <checkbox value="cb" />未选中
        </checkbox-group>
      </view>
      <view class="uni-title uni-common-mt">不同的颜色和尺寸的checkbox</view>
      <view>
        <checkbox-group>
          <label style="background-color: #8A6DE9;">
            <checkbox value="cb1" checked="true" style="transform: scale(0.7)" />选中
          </label>
          <label>
            <checkbox value="cb" style="transform: scale(0.7)" />未选中
          </label>
        </checkbox-group>
      </view>
    </view>
    <view class="uni-title uni-common-mt">推荐展开样式</view>
    <view class="uni-list">
      <checkbox-group @change="checkboxChange">
        <label 
          class="uni-list-cell uni-list-cell-pd" 
          v-for="(item, index) in items" 
          :key="index" 
          style="background-color: #F3A73F; display: flex; align-items: center; margin-bottom: 5px;"
        >
          <checkbox :value="item.value" :checked="item.checked" />
          <view>{{ item.name }}</view>
        </label>
      </checkbox-group>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '美国', value: 'usa', checked: false },
        { name: '中国', value: 'china', checked: true },
        { name: '巴西', value: 'brazil', checked: false },
        { name: '日本', value: 'japan', checked: true },
        { name: '英国', value: 'uk', checked: false },
        { name: '法国', value: 'france', checked: false }
      ]
    };
  },
  methods: {
    checkboxChange: function (e) {
      var items = this.items;
      var values = e.detail.value;
      for (var i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i];
        console.log(
          'i:' +
            i +
            '---' +
            item.name +
            ', index:' +
            values.indexOf(item.value) +
            ', isCheck: ' +
            item.checked
        );
        if (values.indexOf(item.value) >= 0) {
          this.$set(item, 'checked', true);
        } else {
          this.$set(item, 'checked', false);
        }
      }
    }
  }
};
</script>

<style>
</style>